<template>
	<div id="task">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">成功率</h1>
		</header>
		<div class="mui-content">
			<div class="htmleaf-container">

				<div data-to-value='5' data-items-count='32' id="p1_barPie" class="barPie barPie--radio">
					<span class="dqi">当前成功率</span>
					<span class="barPie__value">0</span>
					<div class="barPie__ring">
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem20" value="100" hidden="hidden" />
						<label for="p1_barPieItem20" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem19" value="95" hidden="hidden" />
						<label for="p1_barPieItem19" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem18" value="90" hidden="hidden" />
						<label for="p1_barPieItem18" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem17" value="85" hidden="hidden" />
						<label for="p1_barPieItem17" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem16" value="80" hidden="hidden" />
						<label for="p1_barPieItem16" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem15" value="75" hidden="hidden" />
						<label for="p1_barPieItem15" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem14" value="70" hidden="hidden" />
						<label for="p1_barPieItem14" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem13" value="65" hidden="hidden" />
						<label for="p1_barPieItem13" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem12" value="60" hidden="hidden" />
						<label for="p1_barPieItem12" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem11" value="55" hidden="hidden" />
						<label for="p1_barPieItem11" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem10" value="50" hidden="hidden" />
						<label for="p1_barPieItem10" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem9" value="45" hidden="hidden" />
						<label for="p1_barPieItem9" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem8" value="40" hidden="hidden" />
						<label for="p1_barPieItem8" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem7" value="35" hidden="hidden" />
						<label for="p1_barPieItem7" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem6" value="30" hidden="hidden" />
						<label for="p1_barPieItem6" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem5" value="25" hidden="hidden" />
						<label for="p1_barPieItem5" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem4" value="20" hidden="hidden" />
						<label for="p1_barPieItem4" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem3" value="15" hidden="hidden" />
						<label for="p1_barPieItem3" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem2" value="10" hidden="hidden" />
						<label for="p1_barPieItem2" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem1" value="5" hidden="hidden" />
						<label for="p1_barPieItem1" class="barPie__ring__item"></label>
						<input type="radio" name="barPieRadioGroup" id="p1_barPieItem0" value="0" hidden="hidden" />
						<label for="p1_barPieItem0" class="barPie__ring__item"></label>
					</div>
				</div>

			</div>
			<ul class="center">
				<router-link to="/index">
					<li class="li-item">
						<span class="icon"><img src="../assets/images/center/a1.png"/></span>
						<span class="name">手机注册成功</span>
						<span class="type typed">+5%成功率<div class="goed"></div></span>
					</li>
				</router-link>
				<router-link to="/info">
					<li class="li-item">
						<span class="icon"><img src="../assets/images/center/a2.png"/></span>
						<span class="name">完成身份认证</span>
						<span class="type"><span>1/4</span><span class="dline">&nbsp;&nbsp;|&nbsp;&nbsp;</span>+5%成功率
						<div class="go"></div>
						</span>
					</li>
				</router-link>
				<router-link to="/list">
					<li class="li-item">
						<span class="icon"><img src="../assets/images/center/a3.png"/></span>
						<span class="name">浏览五个产品</span>
						<span class="type"><span>3/5</span><span class="dline">&nbsp;&nbsp;|&nbsp;&nbsp;</span>+25%成功率
						<div class="go"></div>
						</span>
					</li>
				</router-link>
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/a4.png"/></span>
					<span class="name">分享给朋友</span>
					<span class="type">+5%成功率<div class="go"></div></span>
				</li>
			</ul>
		</div>
		<div class="footer">
			<div class="footer-item footer-item-active" @click="gotoPage('index')">
				<span class="mui-icon-house mui-icon-house-active"></span>
				<span class="footer-tab-label footer-tab-label-active">首页</span>
			</div>
			<div class="footer-item" @click="gotoPage('list')">
				<span class="mui-icon-discover" style="left: 40.5%;"></span>
				<span class="footer-tab-label">发现</span>
			</div>
			<!-- 		<div class="footer-item" @click="gotoPage('news')">
				<span class="mui-icon-list"></span>
				<span class="footer-tab-label">资讯</span>
			</div> -->
			<div class="footer-item" @click="gotoPage('mine')">
				<span class="mui-icon-my"></span>
				<span class="footer-tab-label">我的</span>
			</div>
		</div>
	</div>
</template>

<script>
	import libs from "@/assets/js/libs";
	export default {
		mounted() {
			this.amimation();
		},
		data() {
			return {

			};
		},
		methods: {
			gotoPage(url) {
				//判断是否登录
				this.$router.push({
					name: url
				});
			},
			amimation() {
				(function(ELEMENT) {
					ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
					ELEMENT.closest = ELEMENT.closest || function closest(selector) {
						var element = this;
						while(element) {
							if(window.CP.shouldStopExecution(1)) {
								break;
							}
							if(element.matches(selector))
								break;
							element = element.parentElement;
						}
						window.CP.exitedLoop(1);
						return element;
					};
				}(Element.prototype));
				var barPie = {
					onChnage: function(e) {
						if(e.target.name != 'barPieRadioGroup')
							return;
						var scopeElm = e.target.closest('.barPie--radio');
						barPie.update(scopeElm, +e.target.value);
						if(!scopeElm.active)
							scopeElm.querySelector('.barPie__ring').lastElementChild.addEventListener('click', barPie.clickToNull);
						scopeElm.active = 1;
					},
					clickToNull: function() {
						var that = this;
						if(this.previousElementSibling.checked)
							setTimeout(function() {
								that.previousElementSibling.checked = false;
								that.closest('.barPie--radio').querySelector('.barPie__value').innerHTML = '0';
							}, 0);
					},
					update: function(scopeElm, value, speed, extraStep) {
						if(!scopeElm)
							return;
						var valueElm = scopeElm.querySelector('.barPie__value'),
							inital = +valueElm.innerHTML,
							delta = value - inital,
							doin;

						function step(t, elapsed) {
							t = 1 - Math.exp(-t * 7);
							var value = delta * t + inital,
								remainder = value % 1;
							if(t > 0.99 && (remainder > 0.9 || remainder < 0.01)) {
								value = Math.round(value);
								doin.step = function() {};
							} else
								value = value.toFixed(remainder ? 1 : 0);
							valueElm.innerHTML = value;
							if(extraStep)
								extraStep(t);
						}
						if(!valueElm.doin) {
							doin = new Doin(step, speed || 0.33);
							valueElm.doin = doin;
						} else
							doin = valueElm.doin;
						doin.step = step;
						doin.run();
					}
				};
				document.addEventListener('change', barPie.onChnage);
				var barPies = document.querySelectorAll('.barPie');
				setTimeout(lazyCount, 1500);

				function lazyCount() {
					var currentBarPie, toValue, itemsCount;

					function step(t) {
						var itemIdx = Math.round(itemsCount * (toValue / 100) * t);
						document.getElementById(currentBarPie.id + 'Item' + itemIdx).checked = true;
					}
					for(var i = barPies.length; i--;) {
						if(window.CP.shouldStopExecution(2)) {
							break;
						}
						currentBarPie = barPies[i];
						toValue = currentBarPie.dataset.toValue;
						if(toValue) {
							itemsCount = currentBarPie.dataset.itemsCount;
							barPie.update(currentBarPie, toValue, 1.5, step);
						}
					}
					window.CP.exitedLoop(2);
				}
			}
		}
	};
</script>
<style lang="scss">
	@import "../assets/css/funcs.scss";
	@import '../assets/css/common.scss';
	@import '../assets/css/styles.scss';
	#task {
		background-color: #F5F5F5;
		.mui-content>.center:first-child {
			margin-top: 0px;
		}
		.center {
			background-color: #fff;
			margin-top: pxToRem(16px);
			padding-bottom: 100px;
		}
		.center>.li-item:last-child {
			border: none;
		}
		.li-item {
			height: 53px;
			line-height: 53px;
			width: 94%;
			margin: auto;
			background-image: url(../assets/images/arror.png);
			background-repeat: no-repeat;
			background-position: right;
			background-size: 15px 15px;
			border-bottom: 1px solid #f5f5f5;
			background-position-y: 55%;
		}
		.icon {
			width: 22px;
			height: 22px;
			display: block;
			float: left;
			position: relative;
			top: 16px;
			img {
				width: 100%;
			}
		}
		.name {
			font-size: pxToRem(27px);
			color: #000;
			margin-left: pxToRem(16px);
		}
		.type {
			height: 53px;
			line-height: 53px;
			color: #999999;
			font-size: pxToRem(23px);
			padding: 0.0625rem 0.25rem;
			float: right;
			position: relative;
			margin-right: 15px;
		}
		.typed {
			color: #30CA00;
		}
		.go,
		.goed {
			height: 14px;
			width: 14px;
			background-size: cover;
			float: right;
			background-repeat: no-repeat;
			margin-left: 5px;
			position: relative;
			top: 20px;
		}
		.go {
			background-image: url(../assets/images/center/go.png);
		}
		.goed {
			background-image: url(../assets/images/center/goed.png);
		}
		.dline {
			color: #D2D2D2;
			font-weight: bold;
		}
	}
</style>